import { useRef, useEffect } from 'react'
import { makeStyles } from '@material-ui/core/styles';
import elementResizeDetectorMaker from 'element-resize-detector'

const prefix = '/boboan.github.io'

const useStyles = makeStyles(({ breakpoints, spacing, palette }) => ({
    root: {
        margin: '-20px -20px 0 -20px',
        overflow: 'hidden'
    },
    img: {
        marginTop: '-50%',
        marginLeft: '-25%',
        objectFit: 'cover',
        maxWidth: 'initial',
        width: '150%',
        transition: '3s',
        transform:'scale(1.5)'
    }
}))

export default function () {
    const classes = useStyles()
    const imgRef = useRef(null)
    const rootRef = useRef(null)
    const section = []
    useEffect(() => {
        const erd = elementResizeDetectorMaker()
        erd.listenTo(rootRef.current, resize)
    }, [])
    function resize() {
        const height = imgRef.current.clientHeight
        rootRef.current.style.height = `${height / 3}px`
    }
    return <div ref={rootRef} className={classes.root}>
        <img ref={imgRef} className={classes.img} src={`${prefix}/images/heihei.jpg`} onLoad={resize}/>
    </div>
}